<template>
	<view>

		<view id="canvas">
			<view v-if="['188','189','190','191','192'].indexOf(key) !== -1">
				<view class="file-title">{{fileTitle}}</view>
				<u-parse :html="content"></u-parse>
			</view>
			
			<view v-else-if="['193','196'].indexOf(key) !== -1">
				<view class="file-title">{{fileTitle}}</view>
				<view class="userInfo">
					<view>买方（下称甲方）：</view>
					<view>用户昵称：<text>{{userInfo.nickname ? userInfo.nickname : ''}}</text></view>
					<view>手机：<text>{{userInfo.mobile ? userInfo.mobile : ''}}</text></view>
					<view>单位名称：</view>
					<view>社会统一信用代码：</view>
					<view>单位地址：</view>
				</view>
				<view style="margin-top: 40rpx;" class="parentInfo">
					<view>卖方（下称乙方）：</view>
					<view>
						用户昵称：
						<text v-if="userInfo.parent_id > 1">{{parentInfo.nickname}}</text>
						<text v-else>三只猫</text>
					</view>
					<view>
						手机：
						<text v-if="userInfo.parent_id > 1">{{parentInfo.mobile}}</text>
						<text v-else>139xxxx8168</text>
					</view>
					<view>
						单位名称：
						<text v-if="userInfo.parent_id <= 1">广州三只猫信息服务有限公司</text>
					</view>
					<view>
						社会统一信用代码：
						<text v-if="userInfo.parent_id <= 1">91440111xxxxxxxx73</text>
					</view>
					<view>
						单位地址：
						<text v-if="userInfo.parent_id <= 1">广州市白云区鹤龙街鹤泰路10号3楼302房</text>
					</view>
				</view>
				<view style="margin-top: 20rpx;">（以上内容是根据注册信息或客户自填信息由系统自动生成）</view>
				<u-parse :html="content"></u-parse>
			</view>
		
			<view v-else-if="key == '194'">
				<view class="file-title">{{fileTitle}}</view>
				<view class="userInfo">
					<view>甲方（委托方）：</view>
					<view>用户昵称：<text>{{userInfo.nickname ? userInfo.nickname : ''}}</text></view>
					<view>手机：<text>{{userInfo.mobile ? userInfo.mobile : ''}}</text></view>
					<view>单位名称：</view>
					<view>社会统一信用代码：</view>
					<view>单位地址：</view>
				</view>
				<view style="margin-top: 40rpx;" class="platformInfo">
					<view>乙方（受托方）：</view>
					<view>单位名称：兰亭臻选（广州）科技服务有限公司</view>
					<view>社会统一信用代码：91440111XXXXXXXX2G</view>
					<view>单位地址：广州市白云区广州市白云区鹤龙街鹤泰路10号3楼302房</view>
				</view>
				<view style="margin-top: 20rpx;">（以上内容是根据注册信息或客户自填信息由系统自动生成）</view>
				<u-parse :html="content"></u-parse>
			</view>
			
			<view v-else>
				<view class="file-title">供货商信息</view>
				<u-form style="padding: 20rpx;" label-width="250">
					<u-form-item label="供货商昵称"><u-input disabled :value="parentInfo.nickname" /></u-form-item>
					<u-form-item label="供货商ID"><u-input disabled :value="parentInfo.parent_id" /></u-form-item>
					<u-form-item label="供货商手机"><u-input disabled :value="parentInfo.mobile" /></u-form-item>
					<u-form-item label="店铺名称"><u-input disabled :value="parentInfo.store_name" /></u-form-item>
					<u-form-item label="服务老师"><u-input disabled :value="parentInfo.service_nickname" /></u-form-item>
					<u-form-item label="服务老师电话"><u-input disabled :value="parentInfo.service_mobile" /></u-form-item>
					<u-form-item label="您与该店铺的协议" label-position="top">
						<view>
							<view style="color: rgb(41, 121, 255);font-size: 15px;" @click="openUrl('/plugins/extensions/agreement?key=191')">《注册或签署合同的前置说明》</view>
							<view style="color: rgb(41, 121, 255);font-size: 15px;" @click="openUrl('/plugins/extensions/agreement?key=193')">《长期持续供货合同》</view>
						</view>
					</u-form-item>
				</u-form>
				<view style="margin-top: 30rpx;padding: 20rpx;">
					 在任何产品购买页面及个人中心，都标注您的供货商，即为您供货的经销商信息，您的订单交货、发票、服务由该经销商进行，您购买产品在线支付款项，也是您的供货商委托第三方提供代收款服务，兰亭臻选按您供货商给的订单信息代其发货。
				</view>
				<view style="margin-top: 30rpx;padding: 20rpx;">
					 支持线下业务，也可以线上采购，线下怎么购买线上就怎么购买，线下谁是供货商线上谁还是供货商
				</view>
			</view>
		</view>
		<view v-if="!showPoster" style="position: fixed;bottom: 0;width: 100vw;height: 100rpx;background-color: #fff;">
			<view style="display: flex;justify-content: space-between;line-height: 100rpx;padding: 0 20rpx;">
				<view>{{fileTitle}}</view>
				<view style="display: flex;">
					<view v-if="pageOptions.indexOf(key) !== -1" style="color: rgb(41, 121, 255);" @click="download">下载</view>
					<view @click="back()" style="margin-left: 30rpx;">返回</view>
				</view>
			</view>
		</view>
		<view v-if="showPoster" style="width: 100vw;height:100vh;background-color:#fff;position: fixed;top: 0;left: 0;z-index: 999;">
			<scroll-view scroll-y="true" style="width: 100vw;height: 100vh;">
				<image style="width: 100%;" :src="poster_url" mode="widthFix"></image>
			</scroll-view>
			<view style="position: fixed;width: 100vw;height:100rpx;bottom: 0;background-color:rgba(0,0,0,.7);padding-bottom: 30rpx;">
				<view style="display: flex;justify-content: space-between;color:#fff;padding: 0 20rpx;line-height: 100rpx;">
					<view style="color:#fff">长按图片可保存至手机</view>
					<view @click="showPoster = false">点此关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import html2canvas from 'html2canvas'
	export default{
		data(){
			return {
				key:'1',
				fileTitle:'',
				content:'',
				pageOptions:['196','195','194','193','192','191','190','189','188'],
				userInfo:'',
				parentInfo:{
					parent_id:0,
					nickname:'',
					mobile:'',
					store_name:'无',
					service_id:'',
					service_nickname:'',
					service_mobile:''
				},
				poster_url:'',
				showPoster:false
			}
		},
		onLoad(opt){
			let key = opt.key ?? 0;
			this.key = key;
			if(this.pageOptions.indexOf(this.key) !== -1){
				this.getAgreementContent()
			}else{
				this.key = 0;
			}
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getParentInfo();
		},
		methods:{
			async getAgreementContent(){
				let res = await this.$http.request({
					url:this.$api.plugin.diy.page.detail,
					showLoading: true,
					data: {id: this.key}
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.fileTitle = res.data.title;
				let contentData = res.data.navs[0].template.data;
				let imageText = contentData.find(item=>{
					return item.id === 'image-text'
				})
				this.content = imageText.data.content;
			},
			async getParentInfo(){
				let res = await this.$http.request({
					url: this.$api.plugin.diy.parentInfo
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.parentInfo = res.data;
			},
			openUrl(url){
				uni.navigateTo({url})
			},
			back(){
				uni.navigateBack()
			},
			
			download(){
				uni.showLoading({title:'请稍后...'});
				let self = this;
				setTimeout(async ()=>{
					window.pageYoffset = 0;
					document.documentElement.scrollTop = 0;
					document.body.scrollTop = 0;
					let canvas = await html2canvas(
					    document.getElementById('canvas'), 
					    { 
							width: document.getElementById('canvas').clientWidth,
							height: document.getElementById('canvas').clientHeight,
							scale:3,
							dpi: window.devicePixelRatio * 3,
							useCORS: true,
						 }
					);
					self.poster_url = canvas.toDataURL('image/png', 1);
					uni.hideLoading();
					if(self.poster_url.length>0){
						self.showPoster=true;
					}
				},1500)
				
			}
		},
		watch:{
			key(nval,oval){
				this.key = nval;
				if(this.pageOptions.indexOf(this.key) !== -1){
					this.getAgreementContent()
				}else{
					this.key = 0;
					this.getParentInfo()
				}
			}
		},
		filters: {
			fileTitleFilters(key) {
				const fileMap = {
					'1':'兰亭臻选业务模式说明',
				}
				return fileMap[key]
			}
		},
	}
</script>

<style lang="scss">
	.file-title{
		text-align: center;
		padding: 20rpx 0 60rpx;
		font-size: 20pt;
		font-weight: 600;
	}
	
	/deep/ ::-webkit-scrollbar {
		 //滚动条整体样式
		    display: block;
		    width: 10px !important;
		    height: 10px !important;
		    -webkit-appearance: auto!important;
		    background: #f2f2f2;
		    overflow: auto!important;
	}
	/deep/ ::-webkit-scrollbar-thumb {
		 //滚动条里面小方块
		   border-radius: 10px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #535353 !important;
	}
	/deep/ ::-webkit-scrollbar-track {
		   //滚动条
		   border-radius: 10px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #ededed !important;
	}
</style>